<template>
    <div class="app-home">
      <!-- window.print() -->
      <div class="top_bot">
        <!-- v-if="" -->
        <el-button type="primary" @click="isPprice = !isPprice">{{
          isPprice ? "隐藏发货单价" : "显示发货单价"
        }}</el-button>
        <el-button type="primary" @click="exportPDF">导出PDF</el-button>
        <el-button type="primary" @click="printing" :key="key_index"
          >打印</el-button
        >
      </div>
      <div
        ref="exportPDF"
        id="content"
        style="width: 1000px; margin: 10px auto 0"
      >
        <div
          class="content"
          style="margin: 20px auto; padding: 20px; width: calc(100% - 30px)"
        >
          <div
            class="title"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <p class="canc" style="width: 200px"></p>
            <p class="biaot" style="font-size: 22px">
              徐州恒清食品有限公司配送单
            </p>
            <p class="canc" style="width: 200px">餐次:</p>
          </div>
          <div
            class="title"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <p class="txt" style="text-align: left; font-size: 16px; width: 50%">
              订单号:{{ send_info.id }}
            </p>
            <p class="txt" style="text-align: left; font-size: 16px; width: 50%">
              配送日期:{{ send_info.sendTime }}
            </p>
            <!-- <p class="txt" style="text-align: left; font-size: 16px; width: 20%">
                L-大许-中
              </p> -->
          </div>
          <div
            class="title"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <p class="txt" style="text-align: left; font-size: 16px; width: 50%">
              客户名称:{{
                send_info.schoolName
              }}
            </p>
            <p class="txt" style="text-align: left; font-size: 16px; width: 50%">
              联系方式:{{
                send_info.schoolPhone
              }}
            </p>
            <!-- <p class="txt" style="text-align: left; font-size: 16px; width: 20%">
                客户编码:
              </p> -->
          </div>
  
          <!-- <el-table :data="send_info.detail" border>
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="type.cate.name" label="一级分类" width="180">
              </el-table-column>
              <el-table-column prop="type.name" label="商品名称" width="180">
              </el-table-column>
              <el-table-column prop="num" label="订购数量"> </el-table-column>
              <el-table-column prop="num" label="发货数量"> </el-table-column>
              <el-table-column prop="price" label="发货单价"> </el-table-column>
              <el-table-column prop="money" label="发货金额"> </el-table-column>
              <el-table-column prop="beizhu" label="备注"> </el-table-column>
            </el-table> -->
  
          <table cellspacing="0" style="width: 100%">
            <thead>
              <tr style="background-color: rgb(236 236 236)">
                <th style="width: 50px; padding: 5px; border: 2px solid #000">
                  序号
                </th>
                <th style="width: 180px; padding: 5px; border: 2px solid #000">
                  一级分类
                </th>
                <th style="width: 180px; padding: 5px; border: 2px solid #000">
                  商品名称
                </th>
                <th style="width: 80px; padding: 5px; border: 2px solid #000">
                  订购数量
                </th>
                <th style="width: 80px; padding: 5px; border: 2px solid #000">
                  发货数量
                </th>
                <th
                  style="width: 80px; padding: 5px; border: 2px solid #000"
                  v-if="isPprice"
                >
                  发货单价
                </th>
                <th
                  style="width: 80px; padding: 5px; border: 2px solid #000"
                  v-if="isPprice"
                >
                  发货金额
                </th>
                <th style="width: 100px; padding: 5px; border: 2px solid #000">
                  备注
                </th>
              </tr>
            </thead>
  
            <tbody>
              <tr v-for="(item, index) in send_info.details" :key="index">
                <td
                  style="
                    width: 50px;
                    padding: 5px;
                    border: 2px solid #000;
                    text-align: center;
                  "
                >
                  {{ index + 1 }}
                </td>
                <td
                  style="
                    width: 180px;
                    padding: 5px;
                    border: 2px solid #000;
                    text-align: center;
                  "
                >
                {{ item.cateName }}
                </td>
                <td
                  style="
                    width: 180px;
                    padding: 5px;
                    border: 2px solid #000;
                    text-align: center;
                  "
                >
                {{ item.typeName }}
                </td>
                <td
                  style="
                    width: 80px;
                    padding: 5px;
                    border: 2px solid #000;
                    text-align: center;
                  "
                >
                {{ item.num }}{{ item.brandName }}
                </td>
                <td
                  style="
                    width: 80px;
                    padding: 5px;
                    border: 2px solid #000;
                    text-align: center;
                  "
                >
                {{ item.num }}{{ item.brandName }}
                </td>
                <td
                  v-if="isPprice"
                  style="
                    width: 80px;
                    padding: 5px;
                    border: 2px solid #000;
                    text-align: center;
                    cursor: pointer;
                  "
                 
                >
                <!-- @click="getNum(index, item.price, 'price')" -->
                  {{ item.price }}
                </td>
                <td
                  v-if="isPprice"
                  style="
                    width: 80px;
                    padding: 5px;
                    border: 2px solid #000;
                    text-align: center;
                    cursor: pointer;
                  "
                >
                  {{ item.money }}
                </td>
                <td
                  style="
                    width: 100px;
                    padding: 5px;
                    border: 2px solid #000;
                    text-align: center;
                  "
                >
                  {{ item.remark }}
                </td>
              </tr>
            </tbody>
          </table>
  
          <div
            v-if="isPprice"
            class="title"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <p class="erhao_size" style="font-size: 18px">
              大写实际总价:{{ send_info.moneyDx }}
            </p>
            <p class="erhao_size" style="font-size: 18px">
              实际总价:
  
              {{ send_info.money }}元
            </p>
          </div>
  
          <div
            class="title"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <p
              class="txt_xiao"
              style="width: 25%; text-align: left; font-size: 16px"
            >
              制单人:
            </p>
            <p
              class="txt_xiao"
              style="width: 25%; text-align: left; font-size: 16px"
            >
              分拣人:
            </p>
            <p
              class="txt_xiao"
              style="width: 25%; text-align: left; font-size: 16px"
            >
              送货人:
            </p>
            <p
              class="txt_xiao"
              style="width: 25%; text-align: left; font-size: 16px"
            >
              客户签收:
            </p>
          </div>
          <div
            class="title"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <p
              class="txt_xiao"
              style="width: 25%; text-align: left; font-size: 16px"
            >
              出框:
            </p>
            <p
              class="txt_xiao"
              style="width: 25%; text-align: left; font-size: 16px"
            >
              回筐:
            </p>
            <p
              class="txt_xiao"
              style="width: 25%; text-align: left; font-size: 16px"
            >
              物流部:
            </p>
            <p
              class="txt_xiao"
              style="width: 25%; text-align: left; font-size: 16px"
            ></p>
          </div>
  
          <p class="bott_size" style="text-align: left">
            以上货品均符合国家食品安全标准，请确认收货。存根(白)客户(红)财务记账(蓝)发货(黄)
          </p>
        </div>
      </div>
  
      <el-dialog title="修改价格" :visible.sync="query.dialogVisible" width="30%">
        <el-input-number v-model="query.val" autocomplete="off" :min="0"></el-input-number>
        <span slot="footer" class="dialog-footer">
          <el-button @click="query.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="setNum">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
      
      <script>
  import Print from "print-js";
  
  import jsPDF from "jspdf";
  import html2canvas from "html2canvas";
  import { getDeliveryInfo } from "@/api/system/procure";
  // https://www.hqspkj.cn
  export default {
    components: {},
    name: "Index",
    data() {
      return {
        key_index: 0,
        isTrue: true,
        tableData: [],
        send_info: {},
        isPprice: true,
        query: {
          val: null,
          dialogVisible: false,
          index: null,
          key: null,
        },
      };
    },
    created() {
      // console.log(this.$route.query.id)
      getDeliveryInfo(this.$route.query.id).then((res) => {
        this.send_info = res.data;
        this.send_info.moneyDx = this.numberParseChina(this.send_info.money);
  
        // this.send_info.moneyDx = 11
      });
    },
    methods: {
      getNum(index, val, key) {
        console.log(key);
        this.query.key = key;
        this.query.val = val;
        this.query.index = index;
        this.query.dialogVisible = true;
        console.log(this.query);
        
      },
      setNum(index, val) {
        // console.log(this.query);
        // console.log(this.send_info.detail);
        // this.query.val = val
        if (this.query.val == undefined) {
          this.query.val = 0
        }
        this.send_info.detail[this.query.index][this.query.key] = this.query.val
        this.query.dialogVisible = false;
        var obj = this.send_info.detail[this.query.index]
        // console.log(obj)
        // console.log(obj.num * this.query.val)
        var obj = this.send_info.detail[this.query.index]['money'] = obj.num * this.query.val
        
        var money=0
        this.send_info.detail.forEach((item,index)=>{
          money = money + item.money
        })
        // console.log(money)
        this.send_info.money = money
        // this.send_info.moneyDx = this.numberParseChina(this.send_info.money);
      },
      async exportPDF() {
        // this.isTrue = true
        const content = this.$refs.exportPDF;
        const canvas = await html2canvas(content);
        const imgData = canvas.toDataURL("image/png");
        const doc = new jsPDF({
          orientation: "portrait",
          unit: "px",
          format: "a4",
        });
        const imgProps = doc.getImageProperties(imgData);
        const pdfWidth = doc.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        doc.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
        doc.save("配送单.pdf");
  
        // this.isTrue = false
      },
      printing() {
        // window.print()
        // return
        Print({
          printable: "content",
          type: "html",
          // css: './htmlStyle.css',
          scanStyles: false,
          targetStyles: ["*"],
          style:
            "table {border-collapse: collapse; width: 100%;} th, td {border: 1px solid #dfe6ec; padding: 4px 0;}", // 可选-打印时去掉眉页眉尾
        });
      },
    },
  };
  </script>
      
      <style  lang="scss">
  body {
  }
  .app-home {
    text-align: center;
    position: relative;
  
    .top_bot {
      text-align: right;
      width: 1000px;
      margin: 20px auto 0;
    }
  }
  
  // .dayin {
  //   width: 1000px;
  //   margin: 20px auto;
  //   padding: 10px;
  //   border: 1px solid #f1f1f1;
  // }
  
  // .title {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  // }
  
  // .txt_xiao {
  //   font-size: 16px;
  //   width: 25%;
  //   text-align: left;
  // }
  
  // .bott_size {
  //   font-size: 18px;
  //   text-align: left;
  // }
  
  // .erhao_size {
  //   font-size: 18px;
  // }
  
  // .biaot {
  //   font-size: 22px;
  // }
  // .canc {
  //   font-size: 16px;
  //   width: 100px;
  //   text-align: left;
  // }
  
  // .txt {
  //   text-align: left;
  //   font-size: 16px;
  // }
  
  // .txt:nth-child(1) {
  //   width: 40%;
  // }
  // .txt:nth-child(2) {
  //   width: 40%;
  // }
  // .txt:nth-child(3) {
  //   width: 20%;
  // }
  </style>
      
      